<template>
  <view
    class="ui-button"
    :class="[
      `ui-button--${type}`,
      `ui-button--${size}`,
      {
        'ui-button--block': block,
        'ui-button--plain': plain,
        'ui-button--disabled': disabled,
        'ui-button--loading': loading,
        'ui-button--round': round
      }
    ]"
    :hover-class="!disabled && !loading ? 'ui-button--active' : ''"
    :hover-stay-time="50"
    @tap="handleTap"
  >
    <view class="ui-button__content">
      <view v-if="loading" class="ui-button__loading"></view>
      <view v-if="icon" class="ui-button__icon">
        <text :class="['iconfont', `icon-${icon}`]"></text>
      </view>
      <text v-if="$slots.default" class="ui-button__text">
        <slot></slot>
      </text>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'UiButton',
  props: {
    // 按钮类型：primary | success | warning | danger | default
    type: {
      type: String,
      default: 'default',
      validator: (value: string) => ['primary', 'success', 'warning', 'danger', 'default'].includes(value)
    },
    // 按钮尺寸：mini | small | medium | large
    size: {
      type: String,
      default: 'medium',
      validator: (value: string) => ['mini', 'small', 'medium', 'large'].includes(value)
    },
    // 是否为块级元素
    block: {
      type: Boolean,
      default: false
    },
    // 是否为朴素按钮
    plain: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否显示加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 是否为圆角按钮
    round: {
      type: Boolean,
      default: false
    },
    // 图标名称
    icon: {
      type: String,
      default: ''
    }
  },
  emits: ['click'],
  setup(props, { emit }) {
    const handleTap = (event: Event) => {
      if (props.disabled || props.loading) {
        return;
      }

      emit('click', event);
    };

    return {
      handleTap
    };
  }
});
</script>

<style lang="scss">
.ui-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;

  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__loading {
    width: 32px;
    height: 32px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-loading 0.8s linear infinite;
    margin-right: 8px;
  }

  &__icon {
    margin-right: 6px;
  }

  // 按钮大小
  &--mini {
    padding: 0 16px;
    font-size: 24px;
    height: 56px;

    .ui-button__loading {
      width: 24px;
      height: 24px;
    }
  }

  &--small {
    padding: 0 20px;
    font-size: 26px;
    height: 64px;

    .ui-button__loading {
      width: 26px;
      height: 26px;
    }
  }

  &--medium {
    padding: 0 24px;
    font-size: 28px;
    height: 80px;
  }

  &--large {
    padding: 0 32px;
    font-size: 32px;
    height: 92px;

    .ui-button__loading {
      width: 36px;
      height: 36px;
    }
  }

  // 按钮类型
  &--default {
    background-color: #ffffff;
    color: #323233;
    border-color: #ebedf0;
  }

  &--primary {
    background-color: var(--primary-color, #1890ff);
    color: #ffffff;
    border-color: var(--primary-color, #1890ff);
  }

  &--success {
    background-color: var(--success-color, #52c41a);
    color: #ffffff;
    border-color: var(--success-color, #52c41a);
  }

  &--warning {
    background-color: var(--warning-color, #faad14);
    color: #ffffff;
    border-color: var(--warning-color, #faad14);
  }

  &--danger {
    background-color: var(--error-color, #f5222d);
    color: #ffffff;
    border-color: var(--error-color, #f5222d);
  }

  // 朴素按钮
  &--plain {
    background-color: transparent;

    &.ui-button--primary {
      color: var(--primary-color, #1890ff);
    }

    &.ui-button--success {
      color: var(--success-color, #52c41a);
    }

    &.ui-button--warning {
      color: var(--warning-color, #faad14);
    }

    &.ui-button--danger {
      color: var(--error-color, #f5222d);
    }
  }

  // 块级按钮
  &--block {
    display: flex;
    width: 100%;
  }

  // 圆角按钮
  &--round {
    border-radius: 999px;
  }

  // 禁用状态
  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  // 激活状态
  &--active {
    opacity: 0.7;
  }
}

@keyframes btn-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
